<template>
  <!-- 手动回传 -->

  <el-dialog title="手动回传" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="回传类型" prop="report_type">
        <YxhySelect :value.sync="form.report_type" :columns="reportTypeColumns" />
      </el-form-item>
      <el-form-item label="备注" prop="note">
        <el-input v-model="form.note" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="submitForm">提 交</el-button>
    </div>
  </el-dialog>

</template>

<script>
import { handMovementOrder } from '@/api/order/orderData'

import {
  ADV_REPORT_TYPE
} from '@/api/config/channelPostBack.js'

export default {
  name: 'HandMovement',
  props: {
    order_id: {
      type: [Number, String]
    },
    // 订单类型 1-金币 2-会员s
    order_type: {
      type: Number
    }
  },
  data() {
    return {

      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        report_type: undefined,
        note: undefined
      },
      // 表单校验
      rules: {
        report_type: [
          { required: true, message: '请选择回传类型', trigger: ['blur', 'change'] }
        ],
        note: [
          { required: true, message: '请输入备注', trigger: ['blur', 'change'] }
        ]
      },
      reportTypeColumns: []
    }
  },
  methods: {
    setReportTypeColumns() {
      this.reportTypeColumns = []

      const keys = Object.keys(ADV_REPORT_TYPE)
      for (let i = 1; i < keys.length + 1; i++) {
        this.reportTypeColumns.push({
          value: i,
          label: ADV_REPORT_TYPE[i]
        })
      }
    },
    handleOpen() {
      this.open = true
      this.setReportTypeColumns()
      this.reset()
    },
    // 取消按钮
    handleCancel() {
      this.open = false
    },
    // 表单重置
    reset() {
      this.form = {
        report_type: undefined,
        note: undefined
      }
      this.resetForm('formRef')
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          const { order_id, order_type } = this.$props
          handMovementOrder({
            order_id,
            order_type,
            ...this.form
          }).then(res => {
            this.$modal.msgSuccess('操作成功')
            this.open = false
            this.$emit('refresh')
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
